<template>
  <div class="userBox">
    <div class="none"></div>
    <div class="headerImg">
      <img src="@/assets/header.jpg">
    </div>
    <div class="userInfo">欢迎-管理员-Boom</div>
    <div class="realTime">{{times.timer}}</div>
  </div>
  <div class="menu">
    <el-menu
        router="true"
        unique-opened="true"
        background-color="#233545"
        text-color="#fff"
        class="el-menu-vertical-demo"
      >
        <el-sub-menu expand-open-icon index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>系统首页</span>
          </template>
          <el-menu-item index="/BusinessOverview">经营概况</el-menu-item>
          <el-menu-item index="/AccountInformation">账号资料</el-menu-item>
          <el-menu-item index="/AppointmentRecord">预约记录</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><location /></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item index="/memberList">会员列表</el-menu-item>
          <el-menu-item index="2-2">会员等级</el-menu-item>
          <el-menu-item index="2-3">会员卡</el-menu-item>
          <el-menu-item index="2-4">教练列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon><location /></el-icon>
            <span>商城管理</span>
          </template>
          <el-menu-item index="/shop">商品列表</el-menu-item>
          <el-menu-item index="/goodscategory">商品分类</el-menu-item>
          <el-menu-item index="3-3">商城订单</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon><location /></el-icon>
            <span>课程管理</span>
          </template>
          <el-menu-item index="/course">团课管理</el-menu-item>
          <el-menu-item index="4-2">私教管理</el-menu-item>
          <el-menu-item index="4-3">评价管理</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="5">
          <template #title>
            <el-icon><location /></el-icon>
            <span>场馆管理</span>
          </template>
          <el-menu-item index="venues">场馆列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="6">
          <template #title>
            <el-icon><location /></el-icon>
            <span>活动管理</span>
          </template>
          <el-menu-item index="Activity">优惠券</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="7">
          <template #title>
            <el-icon><location /></el-icon>
            <span>系统管理</span>
          </template>
          <el-menu-item index="7-1">成员管理</el-menu-item>
          <el-menu-item index="7-2">角色管理</el-menu-item>
          <el-menu-item index="7-3">广告管理</el-menu-item>
          <el-menu-item index="7-4">公告管理</el-menu-item>
          <el-menu-item index="7-4">系统配置</el-menu-item>
        </el-sub-menu>
      </el-menu>
  </div>
  <div class="routerView">
    <div class="title">
      <div class="first">经营概况</div>
      <div class="second" @click="exit">退出登录</div>
      <div class="third">小程序演示</div>
    </div>
    <dir class="routerBox">
      <router-view></router-view>
    </dir>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, onMounted, toRef } from 'vue';
  // import {Document,Menu as IconMenu,Location,Setting,} from '@element-plus/icons-vue'
  import { useRouter } from 'vue-router'
  export default defineComponent({
    name: "HomePage",
    setup(){
      const router = useRouter()

      // 获取实时时间
      const times = reactive({
        timer: ''
      })
      const formatTime = () => {
        const date = new Date();
        let h: number | string = date.getHours();
        h = h < 10 ? '0' + h : h;
        let minute: number | string = date.getMinutes();
        minute = minute < 10 ? '0' + minute : minute;
        let second: number | string = date.getSeconds();
        second = second < 10 ? '0' + second : second;
        times.timer = h + ' : ' + minute + ' : ' + second;
      }
      onMounted(()=> {
        setInterval(()=> {
            formatTime()
            return times.timer
        },1000)
      })

      // 退出登录
      function exit(){
        router.replace({
          name:'LoginView'
        })
      }

      return {
        times,
        exit
      }
    }
  })
</script>

<style scoped>
  body{
    margin: 0;
    padding: 0;
  }
  .userBox{
    width: 15%;
    height: 24vh;
    border-radius: 10px 10px 0 0;
    background-color: #233545;
  }
  .none{
    width: 100%;
    height: 1px;
  }
  .headerImg{
    /* margin-top: 10px; */
    margin: 10px auto;
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 50px;
    background-color: aliceblue;
  }
  .headerImg>img{
    width: 100%;
    height: 100%;
  }
  .userInfo{
    margin-top: 10px;
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: white;
    font-size: 14px;
  }
  .realTime{
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: white;
    font-size: 18px;
  }
  .menu{
    height: 76vh;
    width: 15%;
    background-color: #233545;
    overflow: auto;
  }
  .menu::-webkit-scrollbar {
    display: none;
  }
  .routerView{
    width: 85%;
    height: 100vh;
    background-color: lightgray;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 10px 10px 0 0;
    overflow: auto;
  }
  .routerView::-webkit-scrollbar {
    display: none;
  }
  .title{
    width: 100%;
    height: 50px;
    background-color: gray;
    border-radius: 10px 10px 0 0;
  }
  .title>div{
    height: 50px;
    line-height: 50px;
  }
  .first{
    float: left;
    margin-left: 15px;
    color: white;
  }
  .second{
    float: right;
    margin-right: 15px;
    color: white;
    cursor: pointer;
  }
  .third{
    float: right;
    margin-right: 15px;
    color: aqua;
  }
</style>